<template>
  <div class="catalog">
    <div class="header">
      <div class="left-btn" @click="goBack()">
        <van-icon name="arrow-left" />
      </div>
<!--      <div class="right-switch" @click="$emit('switch')">-->
<!--        <div class="line"></div>-->
<!--        <div class="line"></div>-->
<!--        <div class="line"></div>-->
<!--      </div>-->
    </div>
<!--    <div class="header-placeholder"></div>-->
    <div class="catalog-list">
      <h1 class="catalog-list__title">目录</h1>
      <div style="display: flex; padding: 20px 0; justify-content: center" v-if="loading">
        <van-loading />
      </div>
      <CatalogItem
        v-else
        v-for="item in catalogList"
        :key="item.id"
        :item-data="item"
        :level="0"
        @catalog-click="catalogClick"
      />
    </div>
  </div>
</template>

<script>
import { bookCatalog } from '@/api'
import CatalogItem from 'views/components/CatalogItem'
export default {
  name: 'Catalog',
  components: {
    CatalogItem
  },
  mixins: [],
  props: {
    inner: {
      type: Boolean,
      default: false
    },
    bookId: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      catalogList: [],
      loading: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getBookCatalog()
  },
  mounted() {
  },
  methods: {
    // 获取目录数据
    async getBookCatalog() {
      const id = this.inner ? this.bookId : (this.$route.query.bookId || 506185042229446)
      try {
        this.loading = true
        const res = await bookCatalog({
          id
        })
        this.catalogList = res.data.bookMark || []
      } finally {
        this.loading = false
      }
    },
    // 点击目录, 跳转到对应页
    async catalogClick(data) {
      if (this.inner) {
        this.$emit('catalog-click', data)
      } else {
        if (data.pageNo === null || data.pageNo === '' || data.pageNo === undefined) {
          this.$toast('该章节无对应的内容')
          return
        }
        this.$router.replace({
          name: 'Home',
          query: {
            page: data.pageNo
          }
        })
      }
    },
    // 返回
    goBack() {
      if (this.inner) {
        this.$emit('switch')
      } else {
        // 定义返回方法，返回到App的电子书详情
        JSCallNative('pageRouteName', {
          param: {
            code: 3001,
            data: {}
          },
          successCallBack: (data) => {
          },
          failedCallBack: (msg) => {
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
.catalog {
  position: relative;
  .header {
    width: 100%;
    position: absolute;
    background-color: #fff;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    display: flex;
    z-index: 99;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    .left-btn {
      height: 30px;
      width: 30px;
      color: #797979;
      margin-left: 8px;
      font-size: 26px;
    }
    .right-switch {
      height: 30px;
      width: 30px;
      padding: 3px 5px;
      margin-right: 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .line {
        width: 100%;
        height: 2px;
        border-radius: 1px;
        background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
      }
    }
  }
  //.header-placeholder {
  //  width: 100%;
  //  height: 44px;
  //}
  .catalog-list {
    overflow-Y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 100vh;
    padding: 44px 10px 10px;
    .catalog-list__title {
      font-weight: normal;
      color: #333;
      font-size: 18px;
      padding: 10px 5px;
    }
  }
}
</style>
